<template>

    <div class="bg-container">
        <div class="my-header">
            <div class="search-form" v-if="headerShow">
                <a-form size="small" :model="queryData" layout="inline">
                    <a-form-item label="选择工厂">
                        <a-select popup-container="html"  :style="{ width: '200px' }" v-model="queryData.firm" @change="changeFirm">
                            <a-option v-for="item in gc" :value="item.id">{{ item.label }}</a-option>
                        </a-select>
                    </a-form-item>
                </a-form>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18"/>
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18"/>
                </a-divider>
            </div>
            <div class="my-tool-bar">
                <Toolbar :items="['新增', '修改', '删除', '导出', '导入']" @add="addHandler" @del="deleteHandler"></Toolbar>
            </div>
        </div>
    </div>

    <div class="gang"></div>

    <div style="padding:10px;box-sizing: border-box;">
        <a-tabs   :lazy-load="true">
            <a-tab-pane title="丹尼尔系数">

                <!-- <a-table stripe :bordered="true" :columns="tableColumns"
                         :row-selection="{ showCheckedAll: true, width: 50 }" v-model:selected-keys="selectedRowKeys"
                         :loading="table.tableLoading" :data="table.dataList" :pagination="pagination" :rowKey="rowKey">
                    <template #edit="{ record }">
                        <a-button @click="editHandler(record)"/>
                    </template>
                </a-table> -->
                  <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"  @grid-ready="gridReady" style="height:100%" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="table.dataList" :columnDefs="tc"></AgGridVuesCopys>

            </a-tab-pane>

        </a-tabs>
    </div>
    <a-drawer ok-text='保存' cancel-text='关闭' :drawer-style="{ 'zIndex': 9999 }" :width="400" :visible="pageData.showAdd"
              unmountOnClose @ok="sideOk"
              @cancel="pageData.showAdd = false">
        <template #title>
            {{ pageData.sideTitle }}
        </template>
        <div>
            <a-form ref="formRef" layout="vertical" :model="dataForm">
                <a-form-item label="编号" field="code" :rules="[{ required: true, message: '编号必填' }]"
                             :validate-trigger="['change', 'blur']">
                    <a-input placeholder="" v-model="dataForm.code"/>
                </a-form-item>
                <a-form-item label="公司" field="firm" :rules="[{ required: true, message: '公司必填' }]"
                             :validate-trigger="['change', 'blur']">
                    <a-input placeholder="" v-model="dataForm.firm"/>
                </a-form-item>
                <a-form-item label="纱支名称" field="soledadName">
                    <a-input v-model="dataForm.soledadName"/>
                </a-form-item>
                <a-form-item label="纱支类别" field="soledadCategory">
                    <a-input v-model="dataForm.soledadCategory"/>
                </a-form-item>
                <a-form-item label="纱支数量" field="soledadNum">
                    <a-input v-model="dataForm.soledadNum"/>
                </a-form-item>
                <a-form-item label="丹尼尔系数" field="coefficientDaniel">
                    <a-input v-model="dataForm.coefficientDaniel"/>
                </a-form-item>
                <a-form-item label="备注" field="remake">
                    <a-input v-model="dataForm.remake"/>
                </a-form-item>

            </a-form>
        </div>
    </a-drawer>
</template>

<script lang="ts">
    import {post} from '@/api/http'
    import {usePagination, useRowKey, useRowSelection, useTable, useTableColumn} from '@/hooks/table';

    import {onMounted, reactive, ref} from 'vue'
    import Toolbar from '@/components/Toolbar.vue';
    import {Message, Modal} from '@arco-design/web-vue';
    import {FormInstance} from '@arco-design/web-vue/es/form';
    

    interface Firm {
        name: string,
        id: number
    }

    interface DanielCoefficientInfo {
        "id": number | string,
        "code": string | undefined,
        "firm": string | undefined,
        "soledadId": string | undefined,
        "soledadName": string | undefined,
        "soledadCategory": string | undefined,
        "soledadNum": string | undefined,
        "coefficientDaniel": string | undefined,
        "remake": string | undefined,
        "isDetele": number | string,
        "createName": string | undefined,
        "createTime": string | undefined,
        "updateName": string | undefined,
        "updateTime": string | undefined
    }

    export default {
        name: "DanielCoefficientInfo",
        setup() {
            const headerShow = ref<boolean>(true)
            let gc = reactive([])

            gc = JSON.parse(localStorage.getItem('gc'))

            function doRefresh() {
                post({
                    url: "PdDaniel/getPage",
                    data: {
                        page: pagination.page,
                        size: pagination.pageSize,
                        isDelete: "0"
                    },
                })
                    .then(({data, code}: any) => {
                        if (code === 200) {
                            gridOption.value.setRowData(data.list)
                            table.handleSuccess(data.list);
                            pagination.setTotalSize(data.total);
                        }
                    })
                    .catch(console.log);
            }

            const {selectedRowKeys, onSelectionChange} = useRowSelection();
            const pagination = usePagination(doRefresh);
            const table = useTable();
            const rowKey = useRowKey("id");
            const tableColumns = useTableColumn([
                {
                    title: "编号",
                    key: "code",
                    dataIndex: "code",
                    width: 150,
                },
                {
                    title: "公司",
                    key: "firm",
                    dataIndex: "firm",
                    width: 150,
                },

                {
                    title: "纱支名称",
                    key: "soledadName",
                    dataIndex: "soledadName",
                    width: 150,
                },
                {
                    title: "纱支类别",
                    key: "soledadCategory",
                    dataIndex: "soledadCategory",
                    width: 150,
                },
                {
                    title: "纱支数量",
                    key: "soledadNum",
                    dataIndex: "soledadNum",
                    width: 150,
                },
                {
                    title: "丹尼尔系数",
                    key: "coefficientDaniel",
                    dataIndex: "coefficientDaniel",
                    width: 150,
                },
                {
                    title: "备注",
                    key: "remake",
                    dataIndex: "remake",
                    width: 150,
                },
                {
                    title: "创建时间",
                    key: "createTime",
                    dataIndex: "createTime",
                    width: 150,
                },
                {
                    title: "创建名称",
                    key: "createName",
                    dataIndex: "createName",
                    width: 150,
                },
                {
                    title: "上传时间",
                    key: "updateTime",
                    dataIndex: "updateTime",
                    width: 150,
                },
                {
                    title: "上传名称",
                    key: "updateName",
                    dataIndex: "updateName",
                    width: 150,
                },
                {
                    title: "编辑",
                    key: "edit",
                    dataIndex: "edit",
                    slotName: 'edit',
                    width: 150, fixed: 'right'
                },

            ]);
            const gridOption = ref()
        const gridReady = (params:any) =>{
            gridOption.value = params.api
        }

            const dataForm = reactive<DanielCoefficientInfo>({
                "id": "",
                "code": "",
                "firm": "",
                "soledadId": "",
                "soledadName": "",
                "soledadCategory": "",
                "soledadNum": "",
                "coefficientDaniel": "",
                "remake": "",
                "isDetele": 0,
                "createName": "",
                "createTime": "",
                "updateName": "",
                "updateTime": ""
            })
            const pageData = reactive<{
                gcList: Firm[];
                showAdd: boolean,
                sideTitle: string
            }>({
                gcList: [],
                showAdd: false,
                sideTitle: '新增丹尼尔系数'
            });

            onMounted(() => {
                doRefresh();
            });
            const queryData = reactive({
                firm: "",

            });

            post({
                url: "PdDaniel/getList",
                data: queryData.firm
            }).then(({data, code}: any) => {
                if (code === 200) {
                    table.handleSuccess(data.list);
                    pagination.setTotalSize(data.total);

                }
            });
            const addHandler = () => {
                pageData.showAdd = true
                pageData.sideTitle = '新增丹尼尔系数'

            }
            //修改 record（本行数据）
            const editHandler = (record: any) => {
                dataForm.id = record.id
                dataForm.code = record.code
                dataForm.firm = record.firm
                dataForm.soledadId = record.soledadId
                dataForm.soledadName = record.soledadName
                dataForm.soledadCategory = record.soledadCategory
                dataForm.remake = record.remake
                //侧滑栏滑出滑入
                pageData.showAdd = true
                pageData.sideTitle = '修改丹尼尔系数'

            }

            const formRef = ref<FormInstance>()

            const sideOk = () => {
                formRef.value?.validate().then((err) => {
                    if (pageData.sideTitle === '新增丹尼尔系数') {
                        //添加
                        if (!err) {
                            post({
                                url: 'PdDaniel/add',
                                data: [dataForm]
                            }).then((res: any) => {

                                if (res.code === 200) {
                                    formRef.value?.resetFields()
                                    pageData.showAdd = false
                                    Message.success({
                                        content: '新增成功',
                                        duration: 5000
                                    })
                                    pageData.showAdd = false
                                    doRefresh()
                                } else {
                                    Message.error({
                                        content: res.message,
                                        duration: 5000
                                    })
                                }

                            })
                        }
                    } else if (pageData.sideTitle === '修改丹尼尔系数') {
                        //修改
                        post({
                            url: "PdDaniel/update",
                            data: [dataForm]
                        }).then(({data, code, message}: any) => {
                            if (code === 200) {
                                formRef.value?.resetFields()
                                Message.success({
                                    content: '修改成功',
                                    duration: 5000
                                })
                                pageData.showAdd = false
                                doRefresh()

                            } else {
                                Message.success({
                                    content: message,
                                    duration: 5000
                                })
                            }
                        });
                    }


                })
            }

            const deleteHandler = () => {
                
                if (gridOption.value.getSelectedRows().length === 0) {
                return
            }
                Modal.confirm({
                    title: '系统提示',
                    content: '确认删除选中的数据?',
                    onOk() {
                        post({
                            url: 'PdDaniel/delete',
                            data:  gridOption.value.getSelectedRows().map((o:any)=>{return o.id}),
                        }).then(({code, data}: any) => {
                            if (code === 200) {
                                Message.success({
                                    content: '删除成功',
                                    duration: 5000
                                })
                            } else {
                                Message.success({
                                    content: '修改失败',
                                    duration: 5000
                                })
                            }
                            doRefresh()
                        })
                    }
                })
            }
            //工厂下拉框改变事件
            const changeFirm = () => {
                post({
                    url: "color/getColorPage",
                    data: {
                        firm: queryData.firm,

                    },
                })
                    .then(({data, code}: any) => {
                        if (code === 200) {
                            table.handleSuccess(data.list);
                            pagination.setTotalSize(data.total);
                        }
                    })
                    .catch(console.log);
            }
            let tc:any[] =  store.tableColumns.map((o:any)=>{

let obj = {
    headerName:o.title,
    field:o.key,
    pinned:o['fixed']
}
if(o.slotName === 'edit'){
    obj['resizable'] = false
    obj['filter'] = false
    obj['sortable'] = false
    obj["lockPosition"]="right"

    obj['cellRenderer'] = {
        template:`<a-tag class="tagCss" @click="a">修改</a-tag>`,
        setup(props:any){
            const a = () =>{
                editHandler(props.params.data)
            }
            return {
                a
            }
        }
        
    }
}

return obj
})

let a = [{
showRowGroup: 'hide_def',
"headerName": "",
"checkboxSelection": true,
"headerCheckboxSelection": true,
"pinned": "left",
"width": 50,
resizable: false,
filter:false,
sortable:false,
minWidth: 50,
maxWidth: 50,
lockPosition:"left",
}]
tc = a.concat(tc)
        const defaultColDef = {
            sortable: true,
            resizable:true,
            filter: true,
            //flex: 1
          }
            return {
                defaultColDef,
                tc,
                deleteHandler,
                sideOk,
                formRef,
                dataForm,
                addHandler,
                selectedRowKeys,
                pagination,
                tableColumns,
                table,
                rowKey,
                pageData,
                queryData,
                changeFirm,
                editHandler,
                gc,
                headerShow,
                gridReady
            };
        },
        components: {Toolbar, }
    }
</script>
<style scoped lang="less">


    .toolbar-item {
        cursor: pointer;
    }
</style>